<script lang="ts" setup>
import { ref, onActivated } from 'vue';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { useI18n } from 'vue-i18n';
import {
  usePlatformMap,
  useStatusList,
  APPLICATION_STATUS_PENDING,
  APPLICATION_STATUS_APPROVED,
  APPLICATION_STATUS_REJECTED,
} from './use';

const statusList = useStatusList();

const platformMap = usePlatformMap();
const listing = ref([]);
const pager = ref({});
const loading = ref(false);
const search = ref();
const { success } = useNotification();
const { t } = useI18n();

const status = ref<number | undefined>(-1);

const refresh = async (page = 1) => {
  const { isSuccess, data } = await $fetch('/admin/education/activity/page', {
    method: 'post',
    data: {
      pageNum: page,
      pageSize: 20,
      status: status.value,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    listing.value = data.records;

    pager.value = {
      current: page,
      total: data.total,
    };
  }
}

const remove = async (id: string) => {
  const { isSuccess } = await $fetch('/admin/education/activity/deleteById', {
    method: 'post',
    data: {
      id,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.del'));
    search.value.refresh();
  }
};

onActivated(() => {
  search.value.refresh('reset');
});
</script>

<template>
  <OpenPageSection>
    <OpenSearchTable :pager="pager" :data="listing" :loading="loading" @search="refresh" ref="search">
      <template #header>
        <AFormItem :label="$t('settings.view.activityApplication.index.statusSelect')">
          <ASelect v-model="status">
            <AOption :value="-1">{{ $t('settings.view.activityApplication.index.status.all') }}</AOption>
            <AOption :value="APPLICATION_STATUS_PENDING">{{ $t('settings.view.activityApplication.index.status.0') }}</AOption>
            <AOption :value="APPLICATION_STATUS_APPROVED">{{ $t('settings.view.activityApplication.index.status.1') }}</AOption>
            <AOption :value="APPLICATION_STATUS_REJECTED">{{ $t('settings.view.activityApplication.index.status.2') }}</AOption>
          </ASelect>
        </AFormItem>
      </template>

      <template #header-button>
        <OpenRouterButton to="/operator/activity-application/add" type="primary">{{ $t('settings.action.add') }}</OpenRouterButton>
      </template>

      <template #columns>
        <ATableColumn :title="$t('settings.view.activityApplication.index.column9')" data-index="platform">
          <template #cell="{ record }">
            {{ platformMap[record.platform as keyof typeof platformMap] || record.platform }}
          </template>
        </ATableColumn>
        <ATableColumn :title="$t('settings.view.activityApplication.index.column1')" data-index="applicant" />
        <ATableColumn :title="$t('settings.view.activityApplication.index.column2')" data-index="phone" />
        <ATableColumn :title="$t('settings.view.activityApplication.index.column3')" data-index="email" />
        <ATableColumn :title="$t('settings.view.activityApplication.index.column4')" data-index="address" tooltip ellipsis />
        <ATableColumn :title="$t('settings.view.activityApplication.index.column5')" data-index="workUnit" tooltip ellipsis />
        <ATableColumn :title="$t('settings.view.activityApplication.index.column6')" data-index="job" tooltip ellipsis />
        <ATableColumn :title="$t('settings.view.activityApplication.index.column7')" data-index="wxCode" />
        <ATableColumn :title="$t('settings.view.activityApplication.index.column8')" data-index="college" tooltip ellipsis />
        <ATableColumn :title="$t('settings.view.activityApplication.index.statusSelect')">
          <template #cell="{ record }">
            <ATag :color="record.status === APPLICATION_STATUS_APPROVED ? 'blue' : record.status === APPLICATION_STATUS_REJECTED ? 'red' : ''">
              {{ statusList[record.status] }}
            </ATag>
          </template>
        </ATableColumn>

        <ATableColumn :title="$t('settings.view.activityApplication.index.column10')" :width="160" :min-width="80">
          <template #cell="{ record }">
            <div class="button-actions">
              <OpenRouterButton
                size="small" :to="`/operator/activity-application/edit/${record.id}`"
              >
                {{ $t('settings.action.edit') }}
              </OpenRouterButton>
              <AButton
                type="primary" status="danger" size="small" v-confirm
                @click="remove(record.id)"
              >
                {{ $t('settings.action.delete') }}
              </AButton>
            </div>
          </template>
        </ATableColumn>
      </template>
    </OpenSearchTable>
  </OpenPageSection>
</template>

<style lang="scss" scoped>
</style>
